<template>
    <div class="home-category">
        <ul class="menu">
            <li v-for="item in menuList" :key="item.id" @mouseenter="categoryId=item.id">
                <RouterLink :to="`/category/${item.id}`">{{item.name}}</RouterLink>
                <template v-if="item.children">
                    <RouterLink to="/" v-for="sub in item.children" :key="sub.id">{{sub.name}}</RouterLink>
                </template>
                <el-skeleton v-else animated>
                    <template slot="template">
                        <el-skeleton-item variant="text" style="width: 50px;background: rgba(255,255,255,0.2)"/>
                        <el-skeleton-item variant="text"
                                          style="width: 50px;margin-left: 10px;background: rgba(255,255,255,0.2)"/>
                    </template>
                </el-skeleton>
            </li>
        </ul>

        <!-- 弹层 -->
        <div class="layer">
            <h4 v-if="currCategory">{{currCategory.id==='brand'?'品牌':'分类'}}推荐 <small>根据您的购买或浏览记录推荐</small></h4>
            <ul v-if="currCategory && currCategory.goods && currCategory.goods.length">
                <li v-for="item in currCategory.goods" :key="item.id">
                    <RouterLink to="/">
                        <img :src="item.picture" alt="">
                        <div class="info">
                            <p class="name ellipsis-2">{{item.name}}</p>
                            <p class="desc ellipsis">{{item.desc}}</p>
                            <p class="price"><i>¥</i>{{item.price}}</p>
                        </div>
                    </RouterLink>
                </li>
            </ul>

            <ul v-if="currCategory && currCategory.id==='brand' && brands.length">
                <li class="brand" v-for="item in brands" :key="item.id">
                    <RouterLink to="/">
                        <img :src="item.picture" alt="">
                        <div class="info">
                            <p class="place"><i class="iconfont icon-dingwei"></i>{{item.place}}</p>
                            <p class="name ellipsis">{{item.name}}</p>
                            <p class="desc ellipsis-2">{{item.desc}}</p>
                        </div>
                    </RouterLink>
                </li>
            </ul>

        </div>

    </div>
</template>

<script>
    import {findBrand} from "@/api/home";

    export default {
        name: "HomeCategory",
        data() {
            return {
                categoryId: '',
                brands: []
            }
        },
        created() {
            this.findBrand()
        },
        methods: {
            async findBrand() {
                const {result} = await findBrand()
                this.brands = result
            }
        },

        computed: {
            menuList() {
                const brand = {
                    id: 'brand',
                    name: '品牌',
                    children: [{id: 'brand-chilren', name: '品牌推荐'}]
                }

                let list = this.$store.getters.categoryList.map(item => {
                    return {
                        id: item.id,
                        name: item.name,
                        children: item.children && item.children.slice(0, 2),
                        goods: item.goods
                    }
                })

                list.push(brand)
                return list
            },
            currCategory() {
                return this.menuList.find(item => item.id === this.categoryId)
            }
        }
    }
</script>

<style scoped lang="less">

    .home-category {
        width: 250px;
        background: rgba(0, 0, 0, 0.8);
        height: 500px;
        position: relative;
        z-index: 99;

        .menu {
            li {
                padding-left: 40px;
                height: 50px;
                line-height: 50px;
                display: flex;
                align-items: center;

                &:hover {
                    background: @xtxColor;
                }

                a {
                    color: #fff;
                    margin-right: 4px;

                    &:first-child {
                        font-size: 16px;
                    }
                }
            }

        }

        .layer {
            width: 990px;
            height: 500px;
            background: rgba(255, 255, 255, 0.8);
            position: absolute;
            left: 250px;
            top: 0;
            padding: 0 15px;
            display: none;

            h4 {
                font-size: 20px;
                font-weight: normal;
                line-height: 80px;

                small {
                    font-size: 16px;
                    color: #666;
                }
            }

            ul {
                display: flex;
                flex-wrap: wrap;

                li {
                    width: 310px;
                    height: 120px;
                    margin-right: 15px;
                    margin-bottom: 15px;
                    border: 1px solid #eee;
                    border-radius: 4px;
                    background: #fff;

                    &:nth-child(3n) {
                        margin-right: 0px;
                    }

                    a {
                        display: flex;
                        width: 100%;
                        height: 100%;
                        align-items: center;
                        padding: 10px;

                        &:hover {
                            background: #e3f9f4;
                        }

                        img {
                            width: 95px;
                            height: 95px;
                        }

                        .info {
                            padding-left: 10px;
                            line-height: 24px;
                            width: 190px;

                            .name {
                                font-size: 16px;
                                color: #666;
                            }

                            .desc {
                                color: #999;
                            }

                            .price {
                                font-size: 22px;
                                color: @priceColor;

                                i {
                                    font-size: 16px;
                                }
                            }
                        }
                    }
                }

                li.brand {
                    height: 180px;

                    a {
                        align-items: flex-start;

                        img {
                            width: 120px;
                            height: 160px;
                        }

                        .info {
                            p {
                                margin-top: 8px;
                            }

                            .place {
                                color: #999;
                            }
                        }
                    }
                }
            }

        }

        &:hover {
            .layer {
                display: block;
            }

        }

    }

</style>